<template>
  <div class="sub-line-box">
    <dv-loading v-if="loading"></dv-loading>
    <template v-else>
      <div class="top-nav"></div>
      <div class="main-content">
        <div class="left-part">
          <section class="inner-content top-height">
            <div class="img-title">
              <div class="img-bg"></div>
              <div class="title-desc">地铁线路能耗总览</div>
            </div>
            <div class="splite-line"></div>
            <div class="title-little-box">本月耗电总览</div>
            <div class="energy-box">
              <div class="month-total">
                <span class="elec-total-val">{{
                  ThisMonthData && ThisMonthData[1] && ThisMonthData[1].value
                }}</span>
                <span class="elec-unit">kWh</span>
                <div class="elec-unit">本月累计耗电</div>
              </div>
              <div class="month-heigh-kw">
                <div class="month-heigh-item">
                  <div>
                    <span class="elec-total-val">{{
                      ThisMonthData &&
                      ThisMonthData[0] &&
                      ThisMonthData[0].value
                    }}</span>
                    <span class="elec-unit">kWh</span>
                  </div>

                  <div class="elec-unit">
                    日最大耗电量({{
                      ThisMonthData &&
                      ThisMonthData[0] &&
                      ThisMonthData[0].time
                    }})
                  </div>
                </div>
                <div class="month-heigh-item">
                  <div>
                    <span class="elec-total-val">{{
                      ThisMonthData &&
                      ThisMonthData[2] &&
                      ThisMonthData[2].value
                    }}</span>
                    <span class="elec-unit">kW</span>
                  </div>

                  <div class="elec-unit">
                    最大功率({{
                      ThisMonthData &&
                      ThisMonthData[2] &&
                      ThisMonthData[2].time
                    }})
                  </div>
                </div>
              </div>
            </div>
          </section>

          <section class="inner-content center-height">
            <div class="title-little-box">车站月耗电排名</div>
            <div class="chart-frame">
              <dv-capsule-chart
                :config="configData"
                style="width: 90%; height: 96%"
              />
            </div>
          </section>

          <section class="inner-content echart-height">
            <div class="title-little-box">本月耗电占比</div>
            <div class="chart-frame-pies">
              <Vechart class="option" :options="bargasOptions"></Vechart>
            </div>
          </section>
        </div>

        <div class="center-part">
          <div class="center-part-top">
            <div class="part-top-dataBox">
              <div class="dataBox-item">
                <div class="item-desc1">
                  {{
                    toDayviewData && toDayviewData[1] && toDayviewData[1].value
                  }}kWh
                </div>
                <div class="item-desc2">昨日累计耗电量</div>
                <div class="item-desc3"></div>
              </div>
              <div class="dataBox-item">
                <div class="item-desc1">
                  {{
                    toDayviewData && toDayviewData[0] && toDayviewData[0].value
                  }}kWh
                </div>
                <div class="item-desc2">小时最大耗电量</div>
                <div class="item-desc3">
                  (
                  {{
                    toDayviewData && toDayviewData[0] && toDayviewData[0].time
                  }}
                  )
                </div>
              </div>
              <div class="dataBox-item">
                <div class="item-desc1">
                  {{
                    toDayviewData && toDayviewData[2] && toDayviewData[2].value
                  }}kWh
                </div>
                <div class="item-desc2">本日最大功率</div>
                <div class="item-desc3">
                  (
                  {{
                    toDayviewData && toDayviewData[2] && toDayviewData[2].time
                  }}
                  )
                </div>
              </div>
              <div class="dataBox-item">
                <div class="item-desc1">
                  {{ waterUse && waterUse[0] && waterUse[0].value }}m³
                </div>
                <div class="item-desc2">昨日生活用水</div>
                <div class="item-desc3"></div>
              </div>
              <div class="dataBox-item">
                <div class="item-desc1">
                  {{ waterUse && waterUse[1] && waterUse[1].value }}m³
                </div>
                <div class="item-desc2">昨日消防用水</div>
                <div class="item-desc3"></div>
              </div>
            </div>
            <div class="part-red-pointBox" :style="point"></div>
            <div class="part-top-pointBox" :style="point1">
              <div class="station-tips-name">
                {{ pointName.stName }}
              </div>
              <div class="tips-item">
                <span class="tips-title">今日用电：</span>
                <span class="tips-value1">{{ stationValue.etvalue }}</span>
                <span class="tips-title">kWh</span>
              </div>
              <div class="tips-item">
                <span class="tips-title">昨日用电：</span>
                <span class="tips-value1">{{ stationValue.eyvalue }}</span>
                <span class="tips-title">kWh</span>
              </div>
              <div class="tips-item">
                <span class="tips-title">今日用水：</span>
                <span class="tips-value2">{{ stationValue.wtvalue }}</span>
                <span class="tips-title">m³</span>
              </div>
              <div class="tips-item">
                <span class="tips-title">昨日用水：</span>
                <span class="tips-value2">{{ stationValue.wyvalue }}</span>
                <span class="tips-title">m³</span>
              </div>
              <div class="tips-item">
                <span class="tips-title">实时COP：</span>
                <span class="tips-value3">{{ stationValue.cop }}</span>
              </div>
              <div
                class="detail-station"
                @click="goDetail(pointName.id, pointName.stName)"
              >
                详情
              </div>
            </div>
            <div
              @click="checkSingle(index)"
              class="single-point"
              v-for="(item, index) in markPointList"
              :key="index"
              :style="item"
            ></div>
          </div>
          <div class="center-part-bottom">
            <div class="elec-use-title">
              <span class="span-title">{{ titleType }}</span>
              <div class="tab-box">
                <span
                  class="month-tab"
                  :class="{ 'select-current': timeType === '月' }"
                  @click="showType('月')"
                  >月</span
                >
                <span
                  class="year-tab"
                  :class="{ 'select-current': timeType === '年' }"
                  @click="showType('年')"
                  >年</span
                >
              </div>
            </div>
            <div class="center-chart-frame">
              <Vechart
                class="option"
                v-if="timeType === '月'"
                :options="monthEchartData"
              ></Vechart>
              <Vechart
                class="option"
                v-else
                :options="yearEchartData"
              ></Vechart>
            </div>
          </div>
        </div>

        <div class="right-part">
          <section class="inner-content top-height">
            <div class="img-title">
              <div class="img-bg"></div>
              <div class="title-desc">通风空调能耗总览</div>
            </div>
            <div class="splite-line"></div>
            <div class="title-little-box">同比环比分析</div>

            <div class="energy-box">
              <div class="month-total">
                <div>
                  <span class="elec-total-val">{{
                   ConsumptionMOMData.monthCumulativeKWH
                  }}</span>

                  <span class="elec-unit">kWh</span>
                </div>

                <div class="elec-unit">上月空调能耗</div>
              </div>
              <div class="month-heigh-kw">
                <div class="month-heigh-item">
                  <div>
                    <span
                      class="elec-total-val t-n"
                      :class="{
                        't-c': ConsumptionMOMData.monthChainComparison < 0,
                      }"
                      >{{ ConsumptionMOMData.monthChainComparison }}</span
                    >
                    <span
                      v-if="ConsumptionMOMData.monthChainComparison < 0"
                      class="elec-unit"
                      style="color: #f7fc06"
                      >↓</span
                    >
                    <span v-else class="elec-unit" style="color: #ff4a75"
                      >↑</span
                    >
                  </div>

                  <div class="elec-unit">月环比（%）</div>
                </div>
                <div class="month-heigh-item">
                  <div>
                    <span
                      class="elec-total-val t-n"
                      :class="{ 't-c': ConsumptionMOMData.yearOnYear < 0 }"
                      >{{ ConsumptionMOMData.yearOnYear }}</span
                    >
                    <span
                      v-if="ConsumptionMOMData.yearOnYear < 0"
                      class="elec-unit"
                      style="color: #f7fc06"
                      >↓</span
                    >
                    <span v-else class="elec-unit" style="color: #ff4a75"
                      >↑</span
                    >
                  </div>

                  <div class="elec-unit">月同比（%）</div>
                </div>
              </div>
            </div>
          </section>

          <section class="inner-content center-height">
            <div class="title-little-box">风水系统COP排名</div>
            <Coprank :rankList="rankList" />
          </section>

          <section class="inner-content echart-height">
            <div class="title-little-box">近7日用电趋势</div>
            <div class="chart-frame-pies">
              <Vechart class="option" :options="sevenDayData"></Vechart>
            </div>
          </section>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
import {
  rotationinfo,
  searchConsumptionTrendByStation,
  DailyEnergyConsumptionQuery,
  DailyWaterConsumptionQuery,
  KWHProportion,
  PowerConsumptionThisMonth,
  searchConsumptionRank,
  searchConsumptionMOM,
  FengShuiSystem,
  queryElectricEngBySevenDay,
} from "../../api/base8090.js";
import { linedata } from "./linemodel/json/linedata.js";
import Vechart from "../../components/charts/Vcharts";
import monthPercentPies from "./linemodel/json/monthPercentPies.json"; //本月耗电占比-环形图
import areaOption from "./linemodel/json/monthLine.json"; //本月用电趋势图表配置文件-曲线
import lowchartsOption from "./linemodel/json/yearBar.json"; //本年用电趋势图表配置文件-柱状
import sevenDayOption from "./linemodel/json/kpiMonthBar.json"; //本近7日用电趋势-曲线
import Coprank from "./linemodel/Coprank";
export default {
  name: "Linelocation",
  components: {
    Vechart,
    Coprank,
  },
  created() {
    this.timer = setInterval(() => {
      if (document.readyState === "complete") {
        this.loading = false;
        window.clearInterval(this.timer);
      }
    }, 1000);
    this.initData();
  },
  data() {
    return {
      loading: true,
      timer: null,
      stationList: [],
      pointIndex: 0,
      // 默认红点位置
      point: linedata.point,
      // 默认信息框位置
      point1: linedata.point1,
      // 默认起点
      pointName: linedata.pointName,
      stId: "S33",
      stationValue: {},
      pointNameLIst: linedata.pointNameLIst,
      // 12线红点数据
      positionList: linedata.positionList,
      // 12号线信息框
      contentPoint: linedata.contentPoint,
      // 12号线标记点
      markPointList: linedata.markPointList,
      timerId: null,
      toDayviewData: "",
      waterUse: "",
      centerData: {},
      ThisMonthData: [],
      dataRank: [],
      piesData: [],
      rankList: [],
      SevenDay: {},
      monthPercentPies: monthPercentPies,
      sevenDayOption: sevenDayOption,
      ConsumptionMOMData: {},
      areaOption: areaOption,
      lowchartsOption: lowchartsOption,
      timeType: "月",
      titleType: "本月用电趋势",
      monthQverviewData: {}, //本月用电总览数据传给子组件
      formerYearsData: {},
      lastMonthData: {},
      thisMonthData: {},
      thisYearData: {},
    };
  },
  mounted() {
    console.log(this.stationValue, "888");
    this.timerId = setInterval(() => {
      this.pointIndex++;
      if (this.pointIndex > 32) {
        this.pointIndex = 0;
      }
      this.icon_move();
    }, 5000);
  },
  methods: {
    icon_move() {
      this.point = this.positionList[this.pointIndex];
      this.point1 = this.contentPoint[this.pointIndex];
      this.pointName = this.pointNameLIst[this.pointIndex];
      this.stId = this.pointName.id;

      rotationinfo({ stationCode: this.stId }).then((res) => {
        if (res.code == 200) {
          this.stationValue = res.data;
        }
      });
    },
    //点击详情
    goDetail(id, stName) {
      sessionStorage.setItem("detailId", id);
      this.$store.commit("SET_SHOW", false);
      this.$store.commit("SET_CENTER", false);
      this.$store.commit("SET_TABSTATUS", true);
      this.$store.commit("SET_STATIONID", id);
      this.$store.commit("SET_STATIONNAME", stName);
      this.$router.push("/");
      this.$store.dispatch("getStationList");
    },
    checkSingle(index) {
      this.pointIndex = index;
      clearInterval(this.timerId);
      this.icon_move();
      setTimeout(() => {
        this.timerId = setInterval(() => {
          this.pointIndex++;
          if (this.pointIndex > 32) {
            this.pointIndex = 0;
          }
          this.icon_move();
        }, 5006);
      }, 1);
    },
    showType(type) {
      if (type === "月") {
        this.titleType = "本月用电趋势";
        this.timeType = "月";
      } else {
        this.titleType = "本年用电趋势";
        this.timeType = "年";
      }
    },
    //数据初始
    initData() {
      rotationinfo({ stationCode: "S33" }).then((res) => {
        if (res.code == 200) {
          this.stationValue = res.data;
        }
      });
      // console.log("车站月用量（电）", res.data);
      searchConsumptionRank({ stationCode: "S00" }).then((res) => {
        this.dataRank = res.data;
      });
      // console.log("本月耗电占比", this.piesData);
      KWHProportion({
        stationCode: "S00",
      }).then((res) => {
        if (res.code == 200) {
          this.piesData = res.data.map((v) => {
            return { value: v.sumValue, name: v.name };
          });
        }
      });
      //console.log("本月耗电总览", this.ThisMonthData);
      PowerConsumptionThisMonth({ stationCode: "S00" }).then((res) => {
        if (res.code == 200) {
          this.ThisMonthData = res.data;
        }
      });

      //生活用水和消防用水
      DailyWaterConsumptionQuery({
        stationCode: sessionStorage.getItem("stationCode"),
      }).then((res) => {
        if (res.code == 200) {
          this.waterUse = res.data;
        }
      });
      // console.log("车站", this.toDayviewData);
      DailyEnergyConsumptionQuery({
        stationCode: sessionStorage.getItem("stationCode"),
      }).then((res) => {
        if (res.code == 200) {
          this.toDayviewData = res.data;
        }
      });
      // console.log("本月耗电趋势", res.data);
      searchConsumptionTrendByStation({
        stationCode: sessionStorage.getItem("stationCode"),
      }).then((res) => {
        if (res.code == 200) {
          this.centerData = res.data;
        }
      });
      // console.log("同比环比分析", res.data);
      searchConsumptionMOM({ stationCode: "S00" }).then((res) => {
        this.ConsumptionMOMData = res.data;
      });
      // console.log("风水系统cop排行", this.rankList);
      FengShuiSystem({ stationCode: "S00" }).then((res) => {
        this.rankList = res.data;
      });
      queryElectricEngBySevenDay({ stationCode: "S00" }).then((res) => {
        this.SevenDay = res.data;
      });
    },
  },
  computed: {
    // 车站月耗电排名
    configData() {
      let datas = JSON.parse(JSON.stringify(this.dataRank));
      return {
        data: datas,
        colors: ["#FF718C", "#FFBB71", "#71FFD5", "#71E2FF", "#71E2FF"],
        showValue: true,
      };
    },
    //本月耗电占比图表数据
    bargasOptions() {
      if (this.piesData && this.piesData.length) {
        let datas = [];
        let arrNames = this.piesData;
        for (let i = 0; i < arrNames.length; i++) {
          datas.push(arrNames[i].name);
        }
        return {
          ...this.monthPercentPies,
          legend: {
            ...this.monthPercentPies.legend,
            data: datas,
          },
          series: [
            {
              ...this.monthPercentPies.series[0],
              data: this.piesData,
            },
          ],
        };
      } else {
        return this.monthPercentPies;
      }
    },

    //本月耗电趋势图表数据展示
    monthEchartData() {
      if (Object.keys(this.centerData).length > 0) {
        let lastMonthData = this.centerData.lastMonth;
        let thisMonthData = this.centerData.thisMonth;
        return {
          ...this.areaOption,
          xAxis: {
            ...this.areaOption.xAxis,
            data: thisMonthData.X,
          },

          series: [
            {
              ...this.areaOption.series[0],
              data: lastMonthData.Y,
            },
            {
              ...this.areaOption.series[1],
              data: thisMonthData.Y,
            },
          ],
        };
      } else {
        return this.areaOption;
      }
    },
    //本年耗电趋势图表数据展示
    yearEchartData() {
      if (Object.keys(this.centerData).length > 0) {
        let formerYearsData = this.centerData.formerYears;
        let thisYearData = this.centerData.thisYear;
        return {
          ...this.lowchartsOption,
          series: [
            {
              ...this.lowchartsOption.series[0],
              data: formerYearsData.Y,
            },
            {
              ...this.lowchartsOption.series[1],
              data: thisYearData.Y,
            },
          ],
        };
      } else {
        return this.lowchartsOption;
      }
    },

    // 近7日用电趋势
    sevenDayData() {
      // return this.sevenDayOption;
      if (Object.keys(this.SevenDay).length > 0) {
        let dataX = this.SevenDay.xAxis;
        let dataY = this.SevenDay.yAxis;
        return {
          ...this.sevenDayOption,
          xAxis: {
            ...this.sevenDayOption.xAxis,
            data: dataX,
          },

          series: [
            {
              ...this.sevenDayOption.series[0],
              data: dataY,
            },
          ],
        };
      } else {
        return this.sevenDayOption;
      }
    },
  },
  destroyed() {
    clearInterval(this.timerId);
    this.timerId = null;
  },
};
</script>
<style lang="less" scoped>
.sub-line-box {
  width: 100%;
  height: 100%;
  .top-nav {
    width: 10rem;
    height: 0.41rem;
    // background: url("../../assets/img/top-nav.png") no-repeat center center;
    // background-size: 100% 100%;
  }
  .main-content {
    width: 10rem;
    height: calc(100% - 0.5rem);
    display: flex;
    position: relative;
    justify-content: space-around;
    .left-part {
      width: 2.6rem;
      height: 100%;
      padding: 20px 10px 10px 10px;
      box-sizing: border-box;
      background: url("../../assets/img/k-l.png") no-repeat top center;
      background-size: 100% 100%;
      // background-color: #144d79;
      display: flex;
      flex-direction: column;
    }
    .center-part {
      width: 4.38rem;
      height: 100%;

      .center-part-top {
        width: 100%;
        height: 2.99rem;
        background: url("../../assets/img/line12.png") no-repeat center center;
        background-size: 100% 100%;

        position: relative;
        .part-top-dataBox {
          width: 100%;
          display: flex;
          padding-top: 10px;
          box-sizing: border-box;
          // background-color: #ccc;
          justify-content: space-around;
          .dataBox-item {
            width: 0.83rem;
            height: 0.47rem;
            border-radius: 0.05rem;
            background: url("../../assets/img/home-item.png") no-repeat center
              center;
            background-size: contain;
            // background-color: #c27878;
            text-align: center;
            color: #a7c9d8;
            .item-desc1 {
              width: 100%;
              height: 0.16rem;
              line-height: 0.16rem;
              font-size: 20px;
            }
            .item-desc2 {
              width: 100%;
              height: 0.16rem;
              line-height: 0.16rem;
              font-size: 0.07rem;
            }
            .item-desc3 {
              width: 100%;
              height: 0.15rem;
              font-size: 0.07rem;
            }
          }
        }
        .part-red-pointBox {
          position: absolute;
          width: 0.13rem;
          height: 0.11rem;
          background: url("../../assets/img/st-icon.gif") no-repeat center
            center;
          background-size: cover;
        }
        .part-top-pointBox {
          width: 1.3rem;
          height: 0.99rem;
          background: url("../../assets/img/st-box.png") no-repeat center center;
          background-size: 100% 100%;
          position: absolute;
          padding-left: 24px;
          padding-top: 20px;
          .station-tips-name {
            font-size: 14px;
            color: #fff;
            font-weight: bold;
          }
          .tips-item {
            width: 100%;
            height: 24px;
            font-size: 12px;
            padding-left: 10px;
            padding-top: 4px;
            font-weight: bold;
            .tips-title {
              color: #fff;
            }
            .tips-value1 {
              color: #16b0ea;
              margin: 8px;
              font-size: 12px;
            }
            .tips-value2 {
              color: #29dad1;
              margin: 8px;
              font-size: 12px;
            }
            .tips-value3 {
              color: #e99114;
              margin: 8px;
              font-size: 12px;
            }
          }
          .detail-station {
            font-size: 14px;
            color: #4affa8;
            width: 40px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            position: absolute;
            right: 30px;
            bottom: 35px;
            cursor: pointer;
          }
        }
        .single-point {
          position: absolute;
          width: 14px;
          height: 60px;
          cursor: pointer;
          background-color: rgba(1, 2, 3, 0.1);
        }
      }
      .center-part-bottom {
        width: 100%;
        height: calc(100% - 2.99rem);
        background: url("../../assets/img/k-m.png") no-repeat center center;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        .elec-use-title {
          font-size: 18px;
          font-weight: bold;
          color: #84bfdd;
          height: 80px;
          // background-color: rgba(70, 60, 60, 0.5);
          display: flex;
          justify-content: space-between;
          align-items: center;
          .span-title {
            width: 180px;
            height: 40px;
            padding-top: 5px;
            margin-left: 30px;
          }
          .tab-box {
            padding-right: 30px;
            padding-top: 40px;
            box-sizing: border-box;
            .month-tab {
              cursor: pointer;
              width: 60px;
              height: 28px;
              line-height: 26px;
              text-align: center;
              display: inline-block;
              color: #fff;
              border: 1px solid #11446b;
              border-right: none;
              font-size: 14px;
            }
            .year-tab {
              border: 1px solid #11446b;
              border-left: none;
              font-size: 14px;
              line-height: 26px;
              cursor: pointer;
              width: 60px;
              height: 28px;
              display: inline-block;
              text-align: center;
              color: #fff;
            }
          }

          .select-current {
            background-color: #1a83d1;
          }
        }
        .center-chart-frame {
          width: 100%;
          height: 80%;
        }
      }
    }
    .right-part {
      width: 2.6rem;
      height: 100%;
      padding: 20px 10px 10px 10px;
      box-sizing: border-box;
      background: url("../../assets/img/k-r.png") no-repeat top center;
      background-size: 100% 100%;
      // background-color: #144d79;
      display: flex;
      flex-direction: column;
    }
  }
}

.inner-content {
  width: 100%;
  margin: 0 auto;
  .img-title {
    width: 80%;
    margin: 0 auto;
    height: 60px;
    background-color: rgba(1, 2, 3, 0.1);
    display: flex;
    justify-content: space-around;
    .img-bg {
      width: 50px;
      height: 50px;
      background: url("../../assets/img/zd.png") no-repeat center center;
      background-size: 100% 100%;
    }
    .title-desc {
      height: 60px;
      font-size: 22px;
      font-weight: bold;
      color: #66e3ff;
      line-height: 67px;
      padding-right: 80px;
    }
  }
  .splite-line {
    width: 90%;
    height: 1px;
    background: #0f3d61;
    margin: 10px auto;
  }
}

.top-height {
  height: 34%;
  .energy-box {
    width: 100%;
    height: 55%;
    display: flex;
    flex-direction: column;
    // background-color: #fff;
    .month-total {
      font-size: 16px;
      width: 100%;
      height: 50%;
      text-align: center;
      // background-color: #148fbd;
    }
    .month-heigh-kw {
      display: flex;
      font-size: 16px;
      width: 100%;
      height: 50%;
      // background-color: #c6dce4;
      justify-content: space-between;
      align-items: center;
      text-align: center;
      .month-heigh-item {
        flex: 1;
        .elec-total-val {
          // font-size: 26px;
          font-weight: bold;
          color: #148fbd;
          margin: 10px;
        }
        .elec-unit {
          font-size: 16px;
          color: #a7c9d8;
          text-align: center;
        }
      }
    }
  }
}
.center-height {
  height: 28%;
  // background-color: #e47e7e;
}
.echart-height {
  height: 36%;
  // background-color: #7ee4b8;
}

.elec-total-val {
  width: 100%;
  font-size: 26px;
  font-weight: bold;
  color: #148fbd;
  // margin: 10px auto;
  text-align: center;
}
.elec-unit {
  font-size: 16px;
  color: #a7c9d8;
}
.elec-use {
  height: 35%;
  width: 100%;
  padding-bottom: 5px;
}

.chart-frame {
  width: 90%;
  height: 90%;
  margin: 0 auto;
}
.chart-frame-pies {
  width: 100%;
  height: 90%;
}
/deep/ .unit-label {
  visibility: hidden;
}
</style>
